<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img class="gw_img" src="../assets/img/lb.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img class="gw_img" src="../assets/img/lb.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img class="gw_img" src="../assets/img/lb.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img class="gw_img" src="../assets/img/lb.jpg" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播图结束 -->
    <div class="gw_bgc">
      <van-tabs title-class="qiehuan" color="blue" animated type="card">
        <van-tab title="校园招聘">
            <h1>
                校园招聘
            </h1>
            <p>
                毕业时间：2021年9月1日 - 2022年8月31日 【中国大陆（内地）以毕业证为准，中国港澳台及海外地区以学位证为准】 网申截止日期：2021年9月27日24:00（北京时间）
            </p>
            <a href="https://join.qq.com/detail.html?id=250">
                腾讯校园2022校园招聘启动公告&FAQ
            </a>
            <van-search v-model="value" placeholder="请输入搜索关键词"
            background="#f5f5f5"
            shape="round"/>
            <div class="gw_btn">
                <span>共87个岗位</span>
                <button class="gw_sx">筛选</button>
            </div>
            <div class="gw_item">
                <p>软件开发-后台开发方向</p>
                <p class="gw_item_1p">
                    <span>
                        技术类
                    </span>
                    <span>|</span>
                    <span>
                        校园招聘
                    </span>
                    <span>
                        |
                    </span>
                    <span>
                         CDG CSIG IEG PCG TEG WXG S1 S2 S3
                    </span>
                </p>
                <p class="gw_item_2p">
                    <span>
                        工作地点：
                    </span>
                    <span>
                        深圳总部 北京 上海 广州 成都 合肥 武汉
                    </span>
                </p>
            </div>
            <div class="gw_item">
                <p>软件开发-后台开发方向</p>
                <p class="gw_item_1p">
                    <span>
                        技术类
                    </span>
                    <span>|</span>
                    <span>
                        校园招聘
                    </span>
                    <span>
                        |
                    </span>
                    <span>
                         CDG CSIG IEG PCG TEG WXG S1 S2 S3
                    </span>
                </p>
                <p class="gw_item_2p">
                    <span>
                        工作地点：
                    </span>
                    <span>
                        深圳总部 北京 上海 广州 成都 合肥 武汉
                    </span>
                </p>
            </div>
            <!-- 此部分v-for读取数据 -->
            <div class="gw_item">
                <p>软件开发-后台开发方向</p>
                <p class="gw_item_1p">
                    <span>
                        技术类
                    </span>
                    <span>|</span>
                    <span>
                        校园招聘
                    </span>
                    <span>
                        |
                    </span>
                    <span>
                         CDG CSIG IEG PCG TEG WXG S1 S2 S3
                    </span>
                </p>
                <p class="gw_item_2p">
                    <span>
                        工作地点：
                    </span>
                    <span>
                        深圳总部 北京 上海 广州 成都 合肥 武汉
                    </span>
                </p>
            </div>
        </van-tab>
        <van-tab title="实习生招聘">
            <h1>
                实习生招聘
            </h1>
            <p>
                面向全部在校生开放的不少于两个月的实习项目（包含暑期实习和日常实习）。
            </p>
            <a href="https://join.qq.com/detail.html?id=246">
                腾讯2021实习生招聘启动公告&FAQ
            </a>
            <van-search v-model="value" placeholder="请输入搜索关键词"
            background="#f5f5f5"
            shape="round"/>
            <div class="gw_btn">
                <span>共87个岗位</span>
                <button class="gw_sx">筛选</button>
            </div>
            <div class="gw_item">
                <p>软件开发-后台开发方向</p>
                <p class="gw_item_1p">
                    <span>
                        技术类
                    </span>
                    <span>|</span>
                    <span>
                        校园招聘
                    </span>
                    <span>
                        |
                    </span>
                    <span>
                         CDG CSIG IEG PCG TEG WXG S1 S2 S3
                    </span>
                </p>
                <p class="gw_item_2p">
                    <span>
                        工作地点：
                    </span>
                    <span>
                        深圳总部 北京 上海 广州 成都 合肥 武汉
                    </span>
                </p>
            </div>
            <div class="gw_item">
                <p>软件开发-后台开发方向</p>
                <p class="gw_item_1p">
                    <span>
                        技术类
                    </span>
                    <span>|</span>
                    <span>
                        校园招聘
                    </span>
                    <span>
                        |
                    </span>
                    <span>
                         CDG CSIG IEG PCG TEG WXG S1 S2 S3
                    </span>
                </p>
                <p class="gw_item_2p">
                    <span>
                        工作地点：
                    </span>
                    <span>
                        深圳总部 北京 上海 广州 成都 合肥 武汉
                    </span>
                </p>
            </div>
            <div class="gw_item">
                <p>软件开发-后台开发方向</p>
                <p class="gw_item_1p">
                    <span>
                        技术类
                    </span>
                    <span>|</span>
                    <span>
                        校园招聘
                    </span>
                    <span>
                        |
                    </span>
                    <span>
                         CDG CSIG IEG PCG TEG WXG S1 S2 S3
                    </span>
                </p>
                <p class="gw_item_2p">
                    <span>
                        工作地点：
                    </span>
                    <span>
                        深圳总部 北京 上海 广州 成都 合肥 武汉
                    </span>
                </p>
            </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="gw_foot">
           没有更多了 
    </div>
  </div>
</template>

<script>
export default {
    data() {
    return {
      value: '',
    };
  },
};
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  //   line-height: 150px;
  text-align: center;
}
.gw_img{
  width: 100%;
  display:block;
}
.gw_bgc{
    background-color: #f5f5f5;
    padding: 10px;

}
.gw_item{
    width: 95%;
    height: 165px;
    margin-top: 10px;
    background-color: white;
    border-radius: 20px;
    padding: 10px;
}
.gw_item h3{
    margin: 0;
    padding: 0;
}
.gw_item_1p{
    margin: 5px 0;
}
.gw_item_2p{
    margin:0;
    color: #7F7F7F;
}
.gw_item p span{
    display: inline-block;
    margin-left: 10px;
    margin-bottom: 5px;
}
.gw_btn{
    line-height: 40px;
}
.gw_sx{
    width: 25%;
    height: 40px;
    background-color: rgba( #000000, $alpha: 0);
    border-radius: 50px;
    border: 1px solid #0052D9;
    color: #0052D9;
    float: right;
}
.gw_foot{
    text-align: center;
}
</style>